<template>
  <a-card :bordered="false" style=" background: #fff !important;">
    <div>当前水印：</div>
    <img class="nowImg" :src="nowImg" :preview="nowImg" />
    <div>修改水印：</div>
    <j-image-upload accept="image/*" ref="imageUp" @change="imgChange" @beforeUpload="beforeUpload"></j-image-upload>
    <div class="percent">
      <div>水印透明度：</div>
      <a-progress :percent="percent" />
      <a-button-group>
        <a-button icon="minus" @click="decline" />
        <a-button icon="plus" @click="increase" />
      </a-button-group>
    </div>
    <a-button type="primary" :loading="loading" @click="save">保存</a-button>
    <!-- <img v-if="imgUrl" class="maskerImage" :src="imgUrl" /> -->

    <canvas id="myCanvas" :width="imgWidth" :height="imgHeight">
    </canvas>
  </a-card>
</template>

<script>
import {
    axios
} from '@/utils/request'
import {
    getAction,
    httpAction
} from '@/api/manage'

export default {
    data () {
        return {
            imgWidth: '',
            imgHeight: '',
            imgUrl: '',
            percent: 50,
            fileUrl: '',
            file: {},
            nowImg: '',
            loading: false,
            id: ''
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        init () {
            getAction('/base/basWateRmark/list').then(res => {
                console.log(res)
                this.id = res.result[0].id
                this.nowImg = res.result[0].wateRmarkUrl
                this.$forceUpdate()
            })
        },
        save () {
            let file = this.file
            // 实例化
            let formdata = new FormData()
            formdata.append('file', file)
            this.loading = true
            axios({
                url: '/oss/file/upload',
                method: 'post',
                headers: {
                    'Content-Type': 'multipart/form-data;charset=UTF-8'
                },
                data: formdata
            }).then(res => {
                console.log('上传', res)
                if (this.nowImg) {
                    httpAction('base/basWateRmark/edit', {
                        id: this.id,
                        wateRmarkUrl: res.result.url
                    }, 'put').then(res => {
                        this.$message.warning('保存成功')
                        this.loading = false
                        this.init()
                    })
                } else {
                    httpAction('base/basWateRmark/add', {
                        wateRmarkUrl: res.result.url
                    }, 'post').then(res => {
                        this.$message.warning('保存成功')
                        this.loading = false
                        this.init()
                    })
                }
            })
        },
        increase () {
            let percent = this.percent + 10
            if (percent > 100) {
                percent = 100
            }
            this.percent = percent
            this.waterMaskerImg()
        },
        decline () {
            let percent = this.percent - 10
            if (percent < 0) {
                percent = 0
            }
            this.percent = percent
            this.waterMaskerImg()
        },
        beforeUpload (file, resolve) {
            resolve()
            this.fileUrl = window.URL.createObjectURL(file)
            this.waterMaskerImg()
        },
        waterMaskerImg () {
            var img = new Image()
            img.src = this.fileUrl
            img.onload = res => {
                this.imgWidth = img.width
                this.imgHeight = img.height
                this.$nextTick(res => {
                    var canvas = document.getElementById('myCanvas')
                    var ctx = canvas.getContext('2d')
                    ctx.drawImage(img, 0, 0)
                    ctx.save()
                    ctx.rotate(30 * Math.PI / 180)
                    ctx.font = '40px microsoft yahei'
                    ctx.fillStyle = 'rgba(255,255,255,' + this.percent / 100 + ')'
                    for (let i = 0; i < 20; i++) {
                        for (let j = 0; j < 20; j++) {
                            ctx.fillText('东南大学融媒体中心', 400 + 400 * i, -400 + 400 * j)
                            // ctx.fillText("东大融媒体", 400 + 400 * i, -400 + 400 * j);
                        }
                    }
                    ctx.restore()
                    this.imgUrl = canvas.toDataURL('image/png')
                    this.file = this.dataURLtoFile(this.imgUrl, 'img')
                })
            }
        },
        imgChange (path, item) {
            console.log(item, 'item')
            this.file = item.file
        },
        dataURLtoFile (dataurl, filename = 'file') {
            let arr = dataurl.split(',')
            let mime = arr[0].match(/:(.*?);/)[1]
            let suffix = mime.split('/')[1]
            let bstr = atob(arr[1])
            let n = bstr.length
            let u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], `${filename}.${suffix}`, {
                type: mime
            })
        }
    }
}
</script>

<style scoped>
  @import '~@assets/less/common.less';

  #myCanvas {
    position: absolute;
    right: 3000px;
    top: 3000px;
  }

  .nowImg {
    width: 300px;
    cursor: pointer;
    margin-bottom: 12px;
  }

  .maskerImage {
    display: block;
    width: 600px;
    margin-top: 12px;
  }

  .percent {
    width: 400px;
    margin-bottom: 12px;
  }
</style>
